<template>
    <div class="count-box">
        <div class="minus" @click="handleMinus">
            <van-icon name="minus" />
        </div>
        <input 
            type="text" 
            class="put" 
            :value="count"
            @input="handleInput"
        >
        <div class="add" @click="handleAdd">
            <van-icon name="plus" />
        </div>
    </div>
    
</template>

<script setup lang="ts">
const props = defineProps({
    count: {
        type: Number,
        default: 1
    },
    test: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['update:count'])

const handleMinus = () => {
    if (props.count > 1) {
        emit('update:count', props.count - 1)
    }
}

const handleAdd = () => {
    emit('update:count', props.count + 1)
}

const handleInput = (e: Event) => {
    const value = parseInt((e.target as HTMLInputElement).value)
    if (!isNaN(value) && value >= 1) {
        emit('update:count', value)
    }
}
</script>

<style scoped lang="scss">
.count-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 30px;
    .minus, .add {
        width: 30px;
        height: 30px;
        background-color: #efefef;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;  // 添加鼠标指针样式
        user-select: none;  // 防止文字被选中
        &:active {  // 添加点击效果
            background-color: #e0e0e0;
        }
    }
    .put {
        width: 30px;
        height: 30px;
        background-color: #f5f5f5;
        outline: none;
        border: none;
        border-radius: 5px;
        text-align: center;
        margin: 0 5px;  // 添加左右间距
    }
}
</style>